Vue.component("mainnav",{
   template:`<nav id="mainnav-container">
            <div id="mainnav">


                <!--OPTIONAL : ADD YOUR LOGO TO THE NAVIGATION-->
                <!--It will only appear on small screen devices.-->
                <!--================================-->
                <div class="mainnav-brand">
                    <a href="index.html" class="brand">
                        <img src="../../../img/logo.png" alt="Nifty Logo" class="brand-icon">
                        <span class="brand-text">Nifty</span>
                    </a>
                    <a href="#" class="mainnav-toggle"><i class="pci-cross pci-circle icon-lg"></i></a>
                </div>

                <!--Menu-->
                <!--================================-->
                <div id="mainnav-menu-wrap">
                    <div class="nano">
                        <div class="nano-content">

                            <!--Profile Widget-->
                            <!--================================-->
                            <div id="mainnav-profile" class="mainnav-profile">
                                <div class="profile-wrap text-center">
                                    <div class="pad-btm">
                                        <img class="img-circle img-md" src="../../../img/profile-photos/7.png"
                                             alt="Profile Picture">
                                    </div>
                           <a href="#profile-nav" class="box-block" data-toggle="collapse" aria-expanded="false">
                                    <span class="pull-right dropdown-toggle">
                                                <i class="dropdown-caret"></i>
                                            </span>
                                        <p class="mnp-name">Aaron Chavez</p>
                                        <span class="mnp-desc">aaron.cha@themeon.net</span>
                                    </a>
                                </div>
                               <div id="profile-nav" class="collapse list-group bg-trans">
                                    <a href="#" class="list-group-item">
                                        <i class="demo-pli-male icon-lg icon-fw"></i> View Profile
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="demo-pli-gear icon-lg icon-fw"></i> Settings
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="demo-pli-information icon-lg icon-fw"></i> Help
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="demo-pli-unlock icon-lg icon-fw"></i> Logout
                                    </a>
                                </div>
                            </div>
                            <ul id="mainnav-menu" class="list-group">

                                <li class="list-divider"></li>
                      
                                <li class="list-header">博天项目系统页面</li>
                                <li>
                                    <a href="#">
                                        <i class="demo-pli-home"></i>
                                        <span class="menu-title">产品管理</span>
                                        <i class="arrow"></i>
                                    </a>
                                    <!--Submenu-->
                                    <ul class="collapse">
                                        <li><a href="../../../html/product/product-msg/product-msg-home.html">产品消息首页</a></li>
                                        <li><a href="../../../html/product/product-info/product-info-list.html">产品列表页面</a></li>
                                        <li><a href="../../../html/product/product-info/product-info-detail.html">基本信息详情页</a></li>
                                        <li><a href="../../../html/product/product-info/product-info-create.html">产品表单模版</a></li>
                                    </ul>
                                </li>
                                
                                 <li>
                                    <a href="#">
                                        <i class="demo-pli-home"></i>
                                        <span class="menu-title">项目管理</span>
                                        <i class="arrow"></i>
                                    </a>
                                    <!--Submenu-->
                                    <ul class="collapse">
                                    </ul>
                                </li>
                                <li class="list-divider"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </nav>`
});
